<template>
  <div class="address">
    <h3>我的收货地址</h3>
    <span class="tip">提示：目前仅支持在结账过程中编辑和新增地址。</span>
    <div class="addressList">
      <div class="address_record" v-for="item in AddressList" :key="item.id">
        <div class="address_info">
          <span class="name">{{ item.name }}</span>
          <span class="phone">{{ item.phone }}</span>
          <span class="default_adr" v-if="item.default_set === '1'">默认</span>
          <span class="adr">{{
            item.area_name + item.desc + " " + item.post_code
          }}</span>
        </div>
        <div class="action">
          <button class="del" @click="showDelModal(item.id)">删除地址</button>
        </div>
        <a-modal
            v-model="delVisible"
            class="delAdr"
            title="删除地址"
            style="textalign: center"
          >
            <span class="delTip">你确定要删除吗</span>
            <template slot="footer">
              <a-button key="back" @click="delhandleCancel"> 取消 </a-button>
              <a-button key="submit" type="primary" @click="delhandleOk()">
                保存
              </a-button>
            </template>
          </a-modal>
      </div>
    </div>
  </div>
</template>

<script>
import {delAddress} from "../assets/js/request.js";
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      delVisible:false,
      cityId:''
    };
  },
  computed: {
    ...mapState("address", ["addressList"]),
    AddressList() {
      if (this.addressList.length > 0) {
        let addressList = this.addressList;
        addressList.forEach((ele) => {
          if (!ele.post_code) {
            ele.post_code = "000000";
          }
        });
        console.log(addressList);
        return addressList;
      }
    },
  },
  created() {
    let res = this.getAddress();
    // this.Addresslist = res
  },
  methods: {
    ...mapActions("address", ["getAddress"]),
    showDelModal(id) {
      this.cityId = id;
      this.delVisible = true;
    },
    delhandleCancel() {
      this.delVisible = false;
    },
    async delhandleOk() {
      let del = await delAddress(this.cityId);
      // console.log(del);
      this.getAddress();
      this.delVisible = false;
    },
  },
};
</script>

<style lang="scss">
.address {
  width: 100%;
  background-color: white;
  padding: 24px 32px 56px;
  h3 {
    font-size: 24px;
    margin-bottom: 6px;
  }
  .tip {
    font-size: 15px;
    letter-spacing: 1.5px;
  }
  .addressList {
    margin: 24px 0 0 0;
    .address_record {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fafafa;
      padding: 24px 36px 24px 24px;
      margin-bottom: 12px;
      .address_info {
        span {
          font-size: 15px;
        }
        .name,
        .phone {
          font-weight: 600;
          margin-right: 18px;
        }
        .default_adr {
          display: inline-block;
          font-size: 14px;
          background-color: #252525;
          color: white;
          padding: 3px 7px;
          border-radius: 4px;
        }
        .adr {
          display: block;
          margin-top: 6px;
          letter-spacing: 1.2px;
        }
      }
      .action {
        .del {
          display: block;
          width: 78px;
          height: 32px;
          background-color: rgb(238, 121, 121);
          border: 0;
          border-radius: 4px;
          color: white;
        }
      }
    }
  }
}
</style>